<template>
  <page class="applydetail">
    <page-header>
      <x-header :left-options="{backText: ''}">申请详情</x-header>
    </page-header>
    <page-content :scroll="false">
      <div class="nav-bar">
        <mt-navbar v-model="selected">
          <mt-tab-item id="1" class='nav'>进度</mt-tab-item>
          <mt-tab-item id="2" class='nav'>申请单</mt-tab-item>
          <mt-tab-item id="3" class='nav'>调拨单</mt-tab-item>
          <mt-tab-item id="4" class='nav'>收发货单</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
            <speed :list="actAuditLogList"></speed>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <apply :data="actApply"></apply>
          </mt-tab-container-item>
          <mt-tab-container-item id="3">
            <allocation :data="actAllot"></allocation>
          </mt-tab-container-item>
          <mt-tab-container-item id="4">
            <deliver :list="actDelivery"></deliver>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </page-content>
  </page>
</template>

<script>
import { mapGetters } from 'vuex'
import { actAllot } from '@service'

import { XHeader } from 'vux'
import speed from '@pages/ActApply/Tabs/speed'
import deliver from '@pages/ActApply/Tabs/deliver'
import apply from '@pages/ActApply/Tabs/apply'
import allocation from '@pages/ActApply/Tabs/allocation'

export default {
  name: 'ActApplyDetails',
  components: {
    speed,
    deliver,
    apply,
    allocation,
    XHeader
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token',
      taskInfo: 'task/info'
    }),
    userId () {
      return this.userInfo.id
    }
  },
  data () {
    return {
      selected: '1',
      actAllot: {},
      actApply: {},
      actAuditLogList: [],
      actDelivery: []
    }
  },
  methods: {
    async loadData () {
      try {
        let token = this.token
        // let userId = this.userId
        let id = this.$route.params.id
        let data = await actAllot.info({ token, id })

        this.actAllot = data.actAllot
        this.actApply = data.actApply
        this.actAuditLogList = data.actAuditLogList.reverse()
        this.actDelivery = data.actDelivery.reverse()
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    console.log('======task info', this.taskInfo)
    this.loadData()
  }
}
</script>

<style lang="scss">
.applydetail {
  .page-content-inner {
    height: 100%;
    .nav-bar {
      display: flex;
      flex-flow: column;
      height: 100%;

      .mint-navbar {
        height: 46px;
      }

      .mint-tab-container {
        flex: 1;
        .mint-tab-container-wrap {
          height: 100%;
          .mint-tab-container-item {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
